<template>
  <div :id="id" ref="boxwrap" :class="className" :style="{height:height,width:width}" :title="title" :data="data" />
</template>

<script>
import resize from '@/components/Charts/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      chart: null,
      fontColor: '#bebebe'
    }
  },
  watch: {
    data: {
      immediate: true,
      handler: function(newval, oldval) {
        this.data = newval
        if (this.chart) {
          this.chart.dispose()
          this.chart = null
          this.dealData()
        }
      },
      deep: true
    }
  },
  mounted() {
    this.domResize()
    this.dealData()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    dealData() {
      const dataList = []
      let tempArr = []
      for (const k in this.data) {
        tempArr = []
        this.data[k].forEach(item => {
          tempArr.push({
            name: item.name,
            value: item.typeCount
          })
        })
        const obj = {}
        obj[k] = tempArr
        dataList.push(obj)
      }
      const title = [{
        text: '报警等级贡献度',
        top: 10,
        left: 'center',
        textStyle: {
          fontSize: 16,
          color: this.fontColor
        }
      }]
      const legend = []
      const series = []
      const offset = 100 / dataList.length
      dataList.forEach((item, index) => {
        const data = Object.values(item)[0]
        title.push({
          subtext: Object.keys(item)[0],
          left: (offset / 2 + offset * index) + '%',
          top: '10%',
          textAlign: 'center',
          subtextStyle: {
            fontSize: 16,
            color: this.fontColor
          }
        })
        legend.push({
          orient: 'vertical',
          type: 'scroll',
          top: '8%',
          right: 3 + offset * (dataList.length - 1 - index) + '%',
          icon: 'circle',
          itemWidth: 10,
          pageIconSize: 8,
          pageIconColor: '#82848a',
          pageTextStyle: {
            color: this.fontColor
          },
          textStyle: {
            fontSize: 16,
            color: this.fontColor
          }
        })

        series.push({
          type: 'pie',
          radius: '60%',
          center: ['50%', '60%'],
          data: data,
          label: {
            position: 'inner',
            alignTo: 'none',
            bleedMargin: 5,
            formatter: '{d}%'
          },
          left: index * offset + '%',
          right: (dataList.length - 1 - index) * offset + '%',
          top: 0,
          bottom: 0,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        })
      })
      this.initChart(title, legend, series)
    },
    initChart(title, legend, series) {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        title,
        tooltip: {
          trigger: 'item'
        },
        legend,
        series
      })
    },
    domResize() {
      const that = this
      const dom = this.$refs.boxwrap
      this.$erd.listenTo(dom, function(element) {
        that.chart.resize()
      })
    }
  }
}
</script>
